<template>
	<view class="item">
		<div class="left">
			<uni-icons class="icon" color="#28B389" :type="item.icon"></uni-icons>
			{{item.title}}
		</div>
		<view class="slot">
			<slot name="right">
				<text>{{item.rightText}}</text>
				<uni-icons class="icon" type="right" color="#999"></uni-icons>
			</slot>
		</view>
		<view class="right">
			<text>{{item.rightText}}</text>
			<uni-icons class="icon" type="right" color="#999"></uni-icons>
		</view>
		<!-- #ifdef MP -->
		<button v-if="item.url==='contact'" open-type="contact" class="contact-btn">联系客服</button>
		<!-- #endif -->
		<!-- #ifndef MP -->
		<button v-if="item.url==='contact'" @click="callPhone" class="contact-btn">联系客服</button>
		<!-- #endif -->
		<navigator v-if="item.url!=='contact'" :url="item.url" class="navigator"></navigator>
	</view>
</template>
<script setup>
defineProps({
	item:{
		type:Object,
		default:()=>{}
	}
})
function callPhone(phoneNumber){
	uni.makePhoneCall({
		phoneNumber
	})
}
</script>

<style lang="scss" scoped>
.item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	position: relative;
	.contact-btn,.navigator {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.left {
		color: #666;
		:deep(){
			.uni-icons{
				color: $primary-theme-color !important;
			}
		}
		.icon {
			margin-right: 10rpx;
		}
	}
	.slot:empty + .right {
		// 插槽为空时显示右侧内容，解决小程序插槽默认值不显示问题
		display: flex;
	}
	.right {
		color: #999;
		font-size: 24rpx;
		display: none;
		align-items: center;
		.icon {
			margin-left: 10rpx;
		}
	}
}
</style>